<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>平台登陆</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" href="css/user/normal.css">
<link rel="stylesheet" href="css/user/login.css">

</head>

<body>

<div class="login" id="app">
	<h1>平台登陆</h1>
	<div>
		<input type="text" name="" placeholder="用户名" required="required" v-model="username"/>
		<input type="password" name="" placeholder="密码" required="required" v-model="password"/>
		<button type="button" class="btn btn-primary btn-block btn-large" v-on:click="submitMessage">登录</button>
        <strong style="color: red;">{{error}}</strong>
	</div>
</div>
<!--引入Vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/user.js"></script>
<script type="text/javascript">
	var app = new Vue({
		el: "#app",
		data: {
			username: "",
			password: "",
            error: ""
		},
		methods: {
            submitMessage: function () {
                var param = new URLSearchParams();
                param.append("username", app.username);
                param.append("password", app.password);
				axios.post('http://localhost:8080/userManage/login', param)
						.then(function (response) {
							console.log(response.data);
							if (response.data.code != 200) {
							    this.error = response.data.message;
                            } else {
							    console.log(response.data.detail.user.id);
							    login(response.data.detail.user.id);
							    window.location.href = "index.html";
                            }
						})
						.catch(function (error) {
							console.log(error);
						});
			}
		},
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
        }
	})
</script>
</body>
</html>
